@import "kf.less";

#specile{
    height:100%;
    overflow: hidden;
    position: relative;
}
#forhorview{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index: 999;
    background:#000;
    opacity: 0.5;
    display: none;
    -webkit-box-align: center;
    p{
        width: 100%;
        color:#fff;
        font-size: 2rem;
        text-align: center;
    }

}
#loading{
    display: none;
}
#stage{
    height:600%;
    overflow: visible;
    -webkit-transition: -webkit-transform 0.8s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
}
.stage{
    height:16.67%;
    background-size:100% 100%;
    background-position: center 0;
    background-repeat: no-repeat;
    position: relative;
}
.width(@num){
    width : @num/6.4%;
}
.height(@num){
    height : @num/11.36%;
}
.stage-shade{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    background: #fff;
}
.stage-shade-hide{
    .animation(icon-big-in 300ms linear forwards);
}
#stage1{
      background-image: url("../img/bg_1.jpg");
      background-size: cover;
      background-position: center center;
      overflow: hidden;
    .logo{
        .width(325);
        .height(129);
        // width: 50%;
        // height: 0;
        // padding-top: 19.82%;
        background-image: url("../img/logo.png");
        background-size: 100% 100%;
        overflow: hidden;
        text-indent: -9999rem;
        margin: 50/11.36% auto 0rem;
    }
    .content-1{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
    }
    .shade-light{
        .width(546);
        .height(325);
        overflow: hidden;
        position: relative;
        top: 204/11.36%;
        margin: 0rem auto;
        div{
            width: 52/20rem;
            height: 100%;
            background: url("../img/shade_light_left.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 0px;
            .animation(shade-light-left 2s linear infinite);
        }
        div+div{
            background-image: url("../img/shade_light_right.png");
            .animation(shade-light-right 2s linear infinite);
        }
    }
    .title{
        .width(471);
        .height(243);
        background: url("../img/1_title.png") no-repeat;
        background-size: 100% 100%;
        margin: 78/20rem auto 0rem;
    }
    .touch{
        position: relative;
        width: 246/20rem;
        height: 246/20rem;
        margin: 2rem auto;
        &.handrun{
            .round1{
                .animation-duration(2.6s);
            }
            .round2{
                .animation-duration(1.8s);
            }
            .round3{
                .animation-duration(1.2s);
            }
        }
        .round1{
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(../img/round1.png) no-repeat;
            background-size: 100% 100%;
            .animation(aniroundL 5s linear infinite);
        }
        .round2{
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(../img/round2.png) no-repeat;
            background-size: 100% 100%;
            .animation(aniroundR 3.6s linear infinite);
        }
        .round3{
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(../img/round3.png) no-repeat;
            background-size: 100% 100%;
            .animation(aniroundL 3s linear infinite);
        }
        .hand{
            position: absolute;
            width: 131/20rem;
            height: 131/20rem;
            left: 50%;
            top: 50%;
            margin-left: -131/40rem;
            margin-top: -131/40rem;
            .hand-1{
                width: 100%;
                height: 100%;
                background: url("../img/touch_1.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0px;
                left: 0px;
                z-index: 3;
            }
            .hand-2{
                width: 100%;
                height: 0px;
                position: absolute;
                bottom: 0px;
                left: 0px;
                z-index: 5;
                overflow: hidden;
                .hand-2-bg{
                    width: 100%;
                    height: 131/20rem;
                    background: url("../img/touch_2.png") no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: 0px;
                }
            }
            .hand-bg{
                width: 1rem;
                height: 1rem;
                border-radius: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 10;
                margin: -.5rem 0px 0px -.5rem;
                background: #fff;
                opacity: 0;
            }
            .hand-bg-big{
                .animation(hand-bg-big 600ms linear forwards);
            }
        }
    }
    .stage_light {
        position: absolute;
        width: 390/20rem;
        height: 98/20rem;
        left: 50%;
        top: 50%;
        margin-left: -9.5rem;
        margin-top: 10.5rem;
        background: url(../img/1_stage_ring.png);
        background-size: 100% 100%;
        -webkit-animation: stage-light-ring 0.6s infinite alternate;
    }
}
#stage2{
    background-image: url("../img/bg_2.jpg");
    overflow: hidden;
    .st2-ip-icon{
        width: 100%;
        .height(124);
        position: absolute;
        bottom: 20/11.36%;
        background: 50% 0% url("../img/s2/bottom.png") no-repeat;
        background-size: auto 100%;
    }
    .st2-icon{
        width: 30rem;
        padding: 5/20rem 0rem 0rem;
        margin: 0px auto;
        &.shake-icon{
            .icon{
                img{
                    .animation(shake-icon 120ms linear infinite);
                }
            }
        }
        .icon{
            float: left;
            width: 124/20rem;
            height: 124/20rem;
            margin: 22/20rem 26/40rem 0rem 26/40rem;
            position: relative;
            z-index: 2;
            border-radius: 2rem;
            &.icon-shake-img{
                img{
                    .animation(shake-icon 120ms linear infinite);
                }
            }
            &.icon-light{
                box-shadow: 0px 0px .9rem 1rem #fff;
            }
            &.icon-big{
                z-index: 10;
                .animation(icon-big 600ms linear forwards);
                *{
                    .animation(icon-big-in 600ms linear forwards);
                }
            }
            img{
                width: 100%;
                height: 100%;
            }
            span{
                width: 44/20rem;
                height: 44/20rem;
                position: absolute;
                top: -13/20rem;
                right: -13/20rem;
                background: #ffffff;
                border-radius: 100%;
                text-align: center;
                i{
                    display: inline-block;
                    width: 38/20rem;
                    height: 38/20rem;
                    background: #de1419;
                    position: relative;
                    top: 2/20rem;
                    border-radius: 100%;
                    color: #ffffff;
                    font-style: normal;
                    font-weight: normal;
                    text-align: center;
                    line-height: 38/20rem;
                    font-size: 26/20rem;
                }
            }
        }
    }
}
.haibao{
     #st3-bottom{
        width: 100%;
        height: 100%;
    }
}
.shade-cav{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 5;
    .cav-show{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    .cav-aim{
        // .animation(st3-top-cav 1800ms linear 2);
    }
    #st3-top2{
        z-index: 8;
    }
    #st3-top3{
        z-index: 6;
    }
    #st3-top4{
        z-index: 4;
    }
    #st3-top5{
        z-index: 2;
    }
    #st3-top6{
        z-index: 1;
    }
}